<template>
  <div class="layout">
    <div class="top">
      <router-link
        to="/need"
        style="flex: 4"
        :class="{ checked: route.path === '/need' }"
      >
        招飞须知
      </router-link>
      <router-link
        to="/introduce"
        style="flex: 4"
        :class="{ checked: route.path === '/introduce' }"
        >招飞简介</router-link
      >
      <router-link
        to="/airplane"
        style="flex: 5"
        :class="{ checked: route.path === '/airplane' }"
      >
        空军武器装备介绍
      </router-link>
      <router-link
        to="/report"
        style="flex: 3"
        :class="{ checked: route.path === '/report' }"
        >附表</router-link
      >
    </div>
    <div class="left"></div>
    <div class="right"></div>

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router'

  const route = useRoute()
</script>
<style lang="scss" scoped>
  .layout {
    .top {
      width: 60vw;
      position: fixed;
      left: 20vw;
      height: 3vw;
      background-color: skyblue;
      border: 1px solid rgba(128, 128, 128, 0.3);
      border-width: 1px 0px 1px 1px;
      display: flex;
      z-index: 1;
      a {
        height: 100%;
        border-right: 1px solid rgba(128, 128, 128, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5vw;
        color: #fff;
        text-decoration: none;
      }

      .checked {
        background: blue;
      }
    }

    .left {
      height: 100vh;
      left: 0;
      top: 0;
      width: 4vw;
      background-color: skyblue;
      position: fixed;
    }

    .right {
      height: 100vh;
      right: 0;
      top: 0;
      width: 4vw;
      background-color: skyblue;
      position: fixed;
    }
  }
</style>
